//mixin 封装 重复的代码  包括  data   methods  watch  钩子函数 ...
//在 各个组件中引入的时候，其实是将 mixin的内容 拷贝一份到 组件里,
//mixin中的代码和 组件中的代码，有时会有冲突，如果重名就导致组件的代码覆盖了mixin的代码
//vue 3.0  局部作用域
import { fetchBrandList, fetchCateList } from "@/api/product";

var productmixin = {
    data() {
        return {
            brandOptions: [], //商品品牌列表
            productCateOptions: [], //商品分类option的数据
            productCateValue: [], //选中的cate的数据
        }
    },
    mounted() {
        //调用 获取 品牌列表
        this.getBrandData();
        //调用 获取 分类列表
        this.getCateData();
    },
    watch: {
        //监听级联菜单的选中的数据是否发生变化了
        productCateValue(newV) {
            console.log(newV);
            //找到 数组的1号元素，赋值给 product_category_id
            this.listQuery.product_category_id = newV[1];
        },
    },
    methods: {
        //获取品牌列表
        async getBrandData() {
            var res = await fetchBrandList();
            //console.log(res);
            this.brandOptions = res.data;
        },
        //获取 分类列表数据
        async getCateData() {
            var res = await fetchCateList();
            //console.log(res);
            //重组数据
            var data = res.data;
            data.forEach((i) => {
                let children = []; //放子节点数据
                //重组子级节点数据
                i.children.forEach((j) => {
                    children.push({
                        label: j.name,
                        value: j.id,
                    });
                });
                this.productCateOptions.push({
                    label: i.name,
                    value: i.id,
                    children: children,
                });
            });
            //console.log(this.productCateOptions);
        },
    }
}

//导出
export default productmixin;